﻿var fadeValue = 100;
var items;
var instructions;
var result;
var correctAnswer;
var correctResult;
var correctResultText;
var incorrectItemIds = [];
var numberOfItemsToGet = 6;
var numberOfItemsToShow = 4;
var numberOfItemsShown = 6;
var instructionsText = "Drag the picture to the box on the right";
var loadingText = "Please wait loading game...";

var draggableOptions = {
    containment: '#gameContainer',
    revert: 'invalid',
    start: function(event, ui) {
        result.fadeOut(fadeValue);
    },
    stop: function(event, ui) {
        if (!$(this).hasClass('correct')) {
            result.text("Try again that's a " + $(this).attr("id"));
            result.show();
        }
    }
};

var droppableOptions = {
    accept: '.correct',
    drop: function(event, ui) {
        $(".draggable").draggable('disable');
        correctResultText.text('Well done! You found the ' + ui.draggable.attr('id') + ' ');
        correctResult.show();

    }
};

var sliderOptions = {
    range: "min",
    min: 1,
    max: 6,
    value: numberOfItemsToShow,
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    },
    change: function(e, ui) {
        while (ui.value != numberOfItemsToShow) {
            if (ui.value > numberOfItemsToShow) {
                showAnimal();
                numberOfItemsToShow++;
            }
            else {
                hideAnimal();
                numberOfItemsToShow--;
            }
        }
    }
};

$(document).ready(function() {
    items = $('#items');
    instructions = $('#instructions');
    result = $('#incorrectResult');
    correctAnswer = $('#correctAnswer');
    correctResult = $('#correctResult');
    correctResultText = $('#correctResultText');

    $("#playAgain").click(function() {
        resetGame();
        setUpGame();
    });

    setUpSlider();
    setUpGame();
});

function resetGame() {
    $(items).find("img").remove();
    correctResult.hide();
    correctAnswer.text("");
    correctResultText.text("");
    incorrectItemIds = [];
    numberOfItemsShown = numberOfItemsToGet;
}

function hideAnimal() {
    if (numberOfItemsShown > 1) {
        numberOfItemsShown--;
        var id = $("#" + incorrectItemIds[numberOfItemsShown - 1]);
        id.fadeTo("slow", 0);
        id.draggable('disable');
    }
}

function showAnimal() {
    if (numberOfItemsToGet > numberOfItemsShown) {
        var id = $("#" + incorrectItemIds[numberOfItemsShown - 1]);
        id.fadeTo("slow", 100);
        id.draggable('enable');
        numberOfItemsShown++;
    }
}

function hideItemsForLevel() {
    var numberOfItemsToHide = numberOfItemsToGet - numberOfItemsToShow;
    for (counter = 0; numberOfItemsToHide > counter; counter++) {
        hideAnimal();
    }
}

function addItems(data) {
    $.each(data.Animals, function(i, item) {
        var img = $("<img />");
        img.attr("id", item.Name);
        img.attr("src", "/Content/images/" + item.Name + ".png");
        img.addClass("draggable");
        if (data.CorrectAnswer == item.Name) {
            img.addClass("correct");
            correctAnswer.text(item.Name);
        }
        else {
            incorrectItemIds.push(item.Name);
        }
        img.appendTo(items);
    });
}

function setUpGame() {
    items.hide();
    instructions.text(loadingText);
    $.getJSON("/Game/GetAnimals",
            { numberOfAnimals: numberOfItemsToGet, previousAnimal: correctAnswer.text() },
            function(data) {
                addItems(data);
                $("#droppable").droppable(droppableOptions);
                assignDraggables();
                hideItemsForLevel();
                setUpSlider();
                setTimeout(function() {
                    instructions.text(instructionsText);
                    items.show();
                }, 1000);
            });
}



function setUpSlider() {
    $("#slider-range-min").slider(sliderOptions);
    $("#amount").val($("#slider-range-min").slider("value"));
}



function assignDraggables() {
    $(".draggable").draggable(draggableOptions);
}